import styled from '@emotion/styled';
import React from 'react';
import RecordPointModal from './RecordPointModal';
import { Tooltip } from 'antd';
import './styles/record_point.less';
import useSyncState from '../hooks/useSyncState';
import { checkRecordPoint, createRecordPoint } from '@/api';
import { useStream } from '../Context/StreamContext';
import Message from '@/utils/message';

import MessageEnum from '@/utils/MessageEnum';
import { useTranslation } from 'react-i18next';

import { startSystemRecord, stopSystemRecord } from '@/utils/lib';
import AgentService from '@/modules/Agent';

const PointText = styled.span`
	background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
	box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.16);
	border-radius: 5px;
	font-size: 13px;
	padding: 6px;
	color: #2d2d2d;
	cursor: pointer;
`;

const PointCricle = styled.span`
	display: inline-block;
	margin-right: 10px;
	width: 10px;
	height: 10px;
	background: #f93341;
	border-radius: 50%;
`;

const IconSvg = styled.span`
	width: 16px;
	height: 16px;
	padding: 0 4px;
	vertical-align: middle;
`;

const RecordButton = styled.span`
	background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
	box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.16);
	border-radius: 5px;
	font-size: 13px;
	padding: 6px;
	color: #2d2d2d;
	cursor: pointer;
	position: absolute;
	right: 2px;
	bottom: 8px;
`;

const RecordPoint = () => {
	const { t } = useTranslation();
	const showModal = async () => {
		try {
			const { data } = await checkRecordPoint(recordPoint().recordingId);
			if (data.code === '0000') {
				if (data.data.count < 50) {
					setRecordPoint({ ...recordPoint(), timePoint: data.data.timePoint });
					setModalVisiable(true);
				} else {
					Message.normal(MessageEnum.RECORD_POINT_MAX);
				}
			} else if (data.code === '1401') {
				Message.normal(MessageEnum.RECORD_POINT_MAX);
			} else if (data.code === '1404') {
				Message.normal(MessageEnum.RECORD_FILE_NOT_EXIST);
			} else {
				Message.normal(MessageEnum.RECORD_POINT_FAILED);
			}
		} catch (error) {
			Message.normal(MessageEnum.RECORD_POINT_FAILED);
			console.log(error);
		}
	};

	const submitPoint = async () => {
		try {
			const { data } = await createRecordPoint(recordPoint());
			if (data.code === '0000') {
				Message.normal(MessageEnum.RECORD_POINT_SUCCESS);
			} else if (data.code === '1401') {
				Message.normal(MessageEnum.RECORD_POINT_MAX);
			} else if (data.code === '1404') {
				Message.normal(MessageEnum.RECORD_FILE_NOT_EXIST);
			} else if (data.code === '1405') {
				Message.normal(`${t('system-recording-file-storage-failed')}`);
			} else if (data.code === '1406') {
				Message.normal(`${t('system-recording-file-storage-interruption')}`);
			} else {
				Message.normal(MessageEnum.RECORD_POINT_FAILED);
			}
		} catch (error) {
			Message.normal(MessageEnum.RECORD_POINT_FAILED);
		}
	};
	const { recordPoint, setRecordPoint, largeStream } = useStream();
	const [modalVisiable, setModalVisiable] = useSyncState<boolean>(false);
	const [isProcessing, setProcessStatus] = React.useState<boolean>(false);

	const handleRecording = () => {
		if (isProcessing) {
			return;
		}
		setProcessStatus(true);
		if (recordPoint().recordingId) {
			stopSystemRecord(recordPoint().recordingId)
				.then(() => {
					setRecordPoint({ ...recordPoint(), recordingId: '' });
				})
				.catch((errpr: any) => {
					console.log('stopSystemRecord error', errpr);
				})
				.finally(() => {
					setProcessStatus(false);
				});
		} else {
			startSystemRecord()
				.then((resp: any) => {
					setRecordPoint({ ...recordPoint(), recordingId: resp.recordId });
					AgentService.recordingAlert.systemRecordingId = resp.recordId; // 设置系统录像id
				})
				.catch((errpr: any) => {
					console.log('startSystemRecord error', errpr);
				})
				.finally(() => {
					setProcessStatus(false);
				});
		}
	};

	return (
		<div className="widget-record-point">
			<span style={!recordPoint().recordingId ? { visibility: 'hidden' } : {}}>
				<Tooltip placement="top" title={t('recording')} color={'#3C3D42'}>
					<PointCricle className="point record-start"></PointCricle>
				</Tooltip>

				<PointText className="point-text" onClick={showModal}>
					<IconSvg className="widget-icon" aria-hidden="true">
						<svg style={{ width: '16px', height: '16px' }}>
							<use xlinkHref={'#icon-widget-biaoji'}></use>
						</svg>
					</IconSvg>
					{t('recording-mark')}
				</PointText>
			</span>
			{/* ((!AgentService.configure.preferenceSettings.isRecordHidden && AgentService.isAutoSystemRecord) || !AgentService.isAutoSystemRecord &&*/}
			{((!AgentService.configure.preferenceSettings.isRecordHidden && AgentService.isAutoSystemRecord) || !AgentService.isAutoSystemRecord) && (
				<RecordButton style={largeStream().length <= 0 ? { visibility: 'hidden' } : {}} onClick={handleRecording}>
					{recordPoint().recordingId ? t('stop-system-record') : t('start-system-record')}
				</RecordButton>
			)}

			<RecordPointModal modalVisiable={modalVisiable()} submitPoint={submitPoint} setModalVisiable={setModalVisiable}></RecordPointModal>
		</div>
	);
};

export default RecordPoint;
